<template>
    <div>
        <div class="box">
            <img src="../img/logo.jpg" alt="" style="width:40%;">
            <div class="top">
                <div class="user">
                    <img src="../img/phone.png" alt="" class="search">
                    <input id="phone" type="text" placeholder="请输入手机号" class="search2">
                </div>
                <div class="user">
                    <img src="../img/key.png" alt="" class="search">
                    <input id="pwd" type="text" placeholder="请输入密码" class="search2" style="margin-bottom:2px">
                </div>
            </div> 
            <div class="btn">登录</div>
        </div>
        <div class="reg">
            <span class="nuser" @click="reg()">注册新用户</span>
            <span style="margin:0 52px;">|</span>
            <span>忘记密码</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        reg(){
            this.$router.push("/reg")
        }
    },
}
</script>
<style scoped>
    .box{
        height:200px;
        width:100%;
        margin-top:50px;
        text-align: center;
    }
    .top{
        width:260px;
        height:80px;
        margin-left:60px;
    }
    .search{
        width:25px;
        height:25px;
        display:block;
    }
    .search2{
        height:30px;
        border:0;
        padding-left:20px;
        outline:none;
        display:block;
        font-size:14px;
    }
    .user{
        display:flex;
        margin-bottom:20px;
        padding:0px 10px;
        border-bottom:1px solid #ccc;
    }
    .btn{
        width:260px;
        height:40px;
        font-size:14px;
        line-height:40px;
        border-radius: 5px;
        background:#ebe7e7;
        margin-left:60px;
        margin-top:25px;
    }
    .reg{
        margin-top:65px;
        margin-left:19%;
        color:#444;
        font-size:14px;
    }
</style>